<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>
<template>
  <!-- 登录页面 -->
  <view class="login position-relative">
    <!-- 背景图片 -->
    <view class="w-42rpx h-42rpx position-absolute top-116rpx left-54rpx z-9">
      <wd-icon name="thin-arrow-left" color="#333" size="18px" @click="goBack()"></wd-icon>
    </view>

    <!-- 背景图片  -->
    <image
      class="w-750rpx h-474rpx position-absolute top-0 left-0"
      :src="staticUrl('/static/login/lg-bg.png')"
    ></image>

    <!-- 公司logo -->
    <image
      class="w-321rpx h-96rpx position-absolute top-256rpx left-74rpx"
      :src="staticUrl('/static/login/login.png')"
    ></image>

    <!-- 登录方式 -->
    <view class="flex items-center mt-452rpx">
      <view
        class="ml-76rpx position-relative pb-20rpx font-bold font-size-32rpx mr-right-50rpx"
        :class="state.logType === '1' ? 'color-primary' : 'color-tip'"
        @click="state.logType = '1'"
      >
        手机号码登录
        <view class="logBr"></view>
      </view>

      <view
        class="ml-50rpx position-relative pb-20rpx font-bold font-size-32rpx mr-right-50rpx"
        :class="state.logType === '2' ? 'color-primary' : 'color-tip'"
        @click="
          () => {
            toast.show('暂未开通')
          }
        "
      >
        账号登录
        <view class="logBr"></view>
      </view>
    </view>

    <!-- 登录录入 -->
    <view class="w-640rpx mx-auto my-0">
      <view class="login-box flex">
        <input
          class="login-input"
          type="text"
          v-model="state.logData.username"
          placeholder="请输入用户名"
        />
      </view>
      <view class="login-box flex justify-between">
        <input
          class="login-input"
          type="text"
          v-model="state.logData.password"
          placeholder="请输入验证码"
        />
        <view class="login-input-code" @click="getCode">{{ state.logCode }}</view>
      </view>
    </view>

    <!-- 登录 -->
    <view
      class="login-button bg-primary color-white font-size-36rpx text-center"
      @click="loginEnter()"
    >
      登录
    </view>
    <view class="login-agreement flex justify-center items-center font-size-24rpx mt-20rpx">
      <view
        class="login-agree-box mr-10rpx mt-6rpx"
        @click="
          () => {
            state.logAgree = !state.logAgree
          }
        "
      >
        <wd-icon
          class="login-agree-icon"
          :color="state.logAgree ? '#3fb674' : '#999'"
          name="check-circle-filled"
          size="28rpx"
        ></wd-icon>
      </view>
      我阅读并同意
      <view class="color-primary" @click="userAgreement">《隐私权政策》</view>
    </view>

    <!-- 其他方式登录 - 微信 -->
    <view class="yl-center font-size-28rpx color-#999 mt-180rpx">
      <view class="log_tip transform-rotate-180"></view>
      <view>第三方登录</view>
      <view class="log_tip"></view>
    </view>

    <view class="yl-center mt-28rpx">
      <image
        @click="logWx()"
        class="w-76rpx h-76rpx"
        :src="staticUrl('/static/login/wx-login.png')"
      ></image>
    </view>

    <!-- 协议 -->
    <wd-message-box selector="wd-agreement-slot">
      <view class="text-left">
        一、 我们收集的信息 用户提供的信息
        <br />
        在您使用本小程序时，我们可能会要求您提供一些个人信息，如姓名、手机号码、电子邮箱地址等。
        <br />
        您在使用某些功能时主动提供的信息，例如您上传的图片、视频、音频等。 自动收集的信息
        <br />
        设备信息：例如您使用的设备型号、操作系统版本、设备识别码（如IMEI）、网络类型等。
        <br />
        使用信息：例如您使用本小程序的时间、频率、浏览记录、搜索记录等。
        <br />
        日志信息：例如您在使用本小程序时的操作记录、错误日志等。 第三方来源的信息
        <br />
        如果本小程序接入了第三方服务（如微信登录、支付功能等），我们可能会从第三方处获取您授权共享的信息。
        <br />
        二、 我们如何使用您的信息 提供服务
        <br />
        我们使用您的信息来提供和改进本小程序的功能和服务，确保您能够正常使用本小程序。
        <br />
        我们可能会使用您的信息来处理您的订单、提供客户支持、进行用户认证等。 分析和优化
        <br />
        我们使用您的信息来分析用户行为，改进用户体验，优化本小程序的功能。 安全保障
        <br />
        我们使用您的信息来保护本小程序的安全，防止欺诈和滥用行为。 法律合规
        <br />
        在法律要求的情况下，我们可能会使用您的信息来遵守法律、法规或政府的要求。
        <br />
        三、我们如何存储和保护您的信息 存储地点
        <br />
        您的信息将存储在中国的服务器上，受中华人民共和国相关法律法规的保护。 数据安全
        <br />
        我们采取合理的技术和管理措施来保护您的信息安全，防止未经授权的访问、泄露、篡改或丢失。
        <br />
        尽管我们尽力保护您的信息，但请注意，没有任何系统或网络是绝对安全的，我们无法保证信息的绝对安全。
        <br />
        四、 您的权利
        <br />
        访问权
        <br />
        您有权访问我们持有的有关您的个人信息，并了解我们如何处理这些信息。
        <br />
        更正权
        <br />
        如果您发现我们持有的信息有误，您有权要求我们更正。
        <br />
        删除权
        <br />
        在某些情况下，您有权要求我们删除您的个人信息。
        <br />
        撤回同意
        <br />
        您可以随时撤回您对我们收集和使用您个人信息的同意。
        <br />
        投诉权
        <br />
        如果您认为我们对您个人信息的处理违反了相关法律法规，您有权向相关部门投诉。
        <br />
        五、 Cookie和类似技术
        我们可能使用Cookie和其他类似技术来收集和存储信息，以便改善您的使用体验。
        您可以通过浏览器设置或小程序设置来管理这些技术，但这可能会影响您使用本小程序的部分功能。
        六、 本政策的变更
        <br />
        我们可能会不时更新本隐私政策。我们会在本小程序内或通过其他途径通知您有关变更。请您定期查看本政策，以了解最新内容。
        七、 联系我们 如果您对本隐私政策有任何疑问或需要进一步的帮助，请通过以下方式联系我们
        <br />
      </view>
    </wd-message-box>
  </view>
</template>

<script setup>
import { defineProps, onMounted } from 'vue'
import { useMessage, useToast } from 'wot-design-uni'
import { postCeshiAPI } from '@/service/app/index'
import { useUserStore } from '@/store'
const userStore = useUserStore()
const message = useMessage('wd-agreement-slot')

const toast = useToast()

const state = reactive({
  wxLogin: {},
  logCode: '获取验证码',
  codeTime: 60,
  logType: '1',
  logAgree: false,
  logData: {
    username: '',
    password: '',
  },

  loading: {},
  error: {},
  data: {},
  run: {},
})

// onMounted
onMounted(() => {})

// 用户协议
const userAgreement = () => {
  message.alert({
    title: '用户协议',
  })
}

// 返回上一个页面的方法
const goBack = () => {
  uni.navigateBack()
}

// 登录
const loginEnter = async () => {
  // 协议判断
  if (!state.logAgree) {
    toast.show('请先同意用户协议')
    wx.getPrivacySetting({
      success: (res) => {
        if (res.needAuthorization) {
          wx.requirePrivacyAuthorize({
            success: (res) => {
              console.log('用户同意授权')
              state.logAgree = true
              console.log(res)
            },
            fail: () => {
              console.log('用户拒绝授权')
              state.logAgree = false
              wx.exitMiniProgram()
            },
          })
        }
      },
    })
    return
  }

  // 更新 登录状态、登录令牌、用户信息
  userStore.setUserInfo({ name: '王大风', token: 'abcdefoawkdoakdoawkdwqk' })

  // 申请登录接口
  const res = await postCeshiAPI({ name: '亿隆2' })

  console.log(res, 'resresres')
}

// 获取验证码
const logWx = () => {
  console.log('微信登陆')
  uni.getUserProfile({
    desc: '获取您的微信信息以授权小程序',
    success: (userRes) => {
      console.log('getUserProfile-res', userRes)
      state.wxLogin.UserProfileRes = userRes

      // 第二部
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          console.log('loginRes', loginRes)
          state.wxLogin.loginRes = loginRes
        },
      })
    },
    fail: (userErr) => {
      uni.showToast({
        title: '授权失败',
        icon: 'error',
      })
      console.log('getUserProfile-err', userErr)
    },
  })
}

// 获取验证码
const getCode = () => {
  toast.show('已发送，注意接收')
  state.codeTime = 60
  state.logCode = `${state.codeTime}S`
  timeCode()
}

// 验证码计时器
const timeCode = () => {
  if (state.codeTime === 0) {
    state.logCode = '获取验证码'
  } else {
    state.codeTime--
    state.logCode = `${state.codeTime}S`
    setTimeout(() => {
      timeCode()
    }, 100)
  }
}
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  background: #fff;
  .log_tip {
    width: 90rpx;
    height: 2rpx;
    background: linear-gradient(270deg, #ffffff 0%, #999999 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .logBr {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    left: 0rpx;
    width: 74rpx;
    height: 6rpx;
    margin: 0 auto;
    background: #3fb674;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  .color-primary {
    .logBr {
      display: block;
    }
  }
  .color-tip {
    .logBr {
      display: none;
    }
  }
  .login-box {
    box-sizing: border-box;
    width: 640rpx;
    height: 100rpx;
    padding: 0 40rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    font-size: 32rpx;
    line-height: 100rpx;
    background: #f1f1f1;
    border-radius: 58rpx 58rpx 58rpx 58rpx;
    input {
      height: 100rpx;
      line-height: 100rpx;
    }
    .login-input-code {
      height: 100rpx;
      font-size: 28rpx;
      line-height: 100rpx;
      color: #3fb674;
    }
  }
  .login-button {
    box-sizing: border-box;
    width: 640rpx;
    height: 80rpx;
    padding: 0 40rpx;
    margin: 0 auto;
    margin-top: 200rpx;
    line-height: 80rpx;
    border-radius: 58rpx 58rpx 58rpx 58rpx;
  }
  .login-agree-box {
    .login-agree-icon {
      display: block;
    }
  }
}
</style>
